<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
       body{
           height: 1500px;
       }
       #top{
           position: absolute;
           top: 500px;
       }
</style>
<body>
    

        <div id="top">
         <span>返回顶部</span>
        </div>
   <div class="header">
            导航栏
        </div>
     <div class="contain">
            内容区域
        </div>
     

        <script>
            $(function()
            {
           //隐藏
           $("#top").hide();
           $(window).scroll(function()
           {
               if($(window).scrollTop()>50)
               {
                   $("#top").fadeIn(200);
               }
               else{
                   $("#top").fadeOut(200);
               }
           })
          //绑定单击事件
          $("#top").bind("click",function()
          {
              $("body,html").animate({
                  scrollTop:0
              },500);
              return false;
          })

            })
        </script>

</body>
</html>